<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons :: head">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <a onclick="add()" class="layui-btn">添加菜单</a>
    </fieldset>

    <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
</div>

<div th:replace="commons :: script"></div>

</body>
</html>
<script>
    layui.use(['element', 'layer', 'form', 'treeGrid'], function () {
        var treeGrid = layui.treeGrid; //很重要
        var treeTable = treeGrid.render({
            elem: '#treeTable'
            , url: basePath + '/sysMenu/listTest'
            , cellMinWidth: 60
            , treeId: 'id'//树形id字段名称
            , treeUpId: 'parentId'//树形父id字段名称
            , treeShowName: 'name'//以树形式显示的字段
            , cols: [[
                {field: 'name', width: '200', title: '名称'}
                , {field: 'parentId', width: '100', title: 'pId'}
                , {field: 'id', width: '100', title: 'id'}
                , {field: 'sort', width: '100', title: '排序'}
                , {field: 'href', width: '200', title: '链接'}
                , {
                    field: 'isShow', width: '100', title: '是否显示', templet: function (d) {
                        if (d.isShow === '1') {
                            return '<span style="color: #3fcc2f;">' + '是' + '</span>'
                        } else {
                            return '<span style="color: #c00;">' + '否' + '</span>'
                        }
                    }
                }
                , {field: 'permission', width: '100', title: '权限标识'}
                , {
                    field: 'type', width: '100', title: '类型', templet: function (d) {
                        if (d.type === '1') {
                            return '菜单'
                        } else {
                            return '功能'
                        }
                    }
                }
                , {fixed: 'right', width: 250, align: 'center', toolbar: '#barDemo', title: '操作'} //这里的toolbar值是模板元素的选择器
            ]]
            , page: false
        });

        //监听工具条
        treeGrid.on('tool(treeTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    , title: 'xxx'
                });
            } else if (layEvent === 'add') {

            }
        });

    });

    function add() {
        layer.open({
            title: "添加菜单"
            , area: ['700px', '700px']
            , type: 2
            , fixed: false //不固定
            , maxmin: true
            , content: basePath + "/sysMenu/add"
        });
    }
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="add">添加下级菜单</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>